import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components'
import Iconfont from '@/components/Iconfont'
import classnames from 'classnames'
import { connect } from 'react-redux'
import { goToLogin } from '@/utils/login'
import dayjs from 'dayjs'
import './style.scss'

interface State {
  carInfo?: ICar | null
  loaded: boolean,

}
interface Props {
  extra?: any | object
}
@connect<any>(({ user }) => ({
  user
}))
export default class CarInfo extends Component<any, State> {
  constructor (props) {
    super(...arguments)
    console.log('props---props', props)
    this.state = {
      loaded: props.loaded,
    }
  }

  componentDidMount() { }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!this.state.loaded) {
      this.setState({
        loaded: true
      })
    }
  }

  handleGotoendit(e, carLicense, currentMileage) {
    const { disabled } = this.props
    if (disabled) return
    e.stopPropagation()
    Taro.navigateTo({
      url: `/pages/car/mileage/index?carLicense=${carLicense}&currentMileage=${currentMileage}`
    })
  }

  carStyleView() {
    const { carInfo, disabled, user, extra } = this.props
    let USERINFO = Taro.getStorageSync('IS_USERINFO')
    return (
      carInfo ?
        <View className='car-box'>
          <View className='car-info' onClick={() => {
            if (disabled) return
            Taro.navigateTo({
              url: '/pages/car/list/index'
            })
          }}>
            <Image className='car-img' src={extra.brandLogo} mode='aspectFit'></Image>
            <View className='car-right'>
              <View className='car-license'>{carInfo.carLicense} <Text className='right-allow'></Text></View>
              <View className='car-name'>{extra.carModelShortLabel}</View>
              {/* 1:燃油,2:纯电动,3:油电混合 */}
              <View className={classnames('car-type', {
                'car-type1': extra.carFuelType == 1,
                'car-type2': extra.carFuelType == 2,
                'car-type3': extra.carFuelType == 3,
              })}>{extra.carFuelType == 1 ? '燃油' : extra.carFuelType == 2 ? '纯电动' : extra.carFuelType == 3 ? '油电混合' : '--'}</View>
            </View>
          </View>
          <View className='car-mileage' onClick={(e) => this.handleGotoendit(e, carInfo.carLicense, carInfo.currentMileage)}>
            <View>当前里程</View>
            <View className={classnames('mileage-num', { 'disabled': disabled })}>{carInfo.currentMileage}km</View>
          </View>
          {
            !extra.showUserInfo ?
              extra.nextMaintainData ? <View className='maintain-data'>
                <View className='maintain-data-label'>
                  下次保养 <View className='question-icon'></View>
                  {extra.nextMaintainData.expireType == 1 && <View className='status-box'>未到期</View>}
                  {extra.nextMaintainData.expireType == 2 && <View className='status-box color1'>已到期</View>}
                  {extra.nextMaintainData.expireType == 3 && <View className='status-box color2'>已超期</View>}
                </View>
                <View className='maintain-data-date'>{extra.nextMaintainData.maintainAt ? dayjs.unix(extra.nextMaintainData.maintainAt).format('YYYY年MM月') : '-年-月'}</View>
                <View className='maintain-data-mileage'>{extra.nextMaintainData.mileage}km</View>
              </View> : <View className='maintain-data'>
                <View className='maintain-data-label'>
                  下次保养 <View className='question-icon'></View></View>
                <View className='maintain-data-date'>-年-月</View>
                <View className='maintain-data-mileage'>--km</View>
              </View> : <View className='user'>
                <View className='user-name'>联系人</View>
                <View className='user-mobile'>{USERINFO.mobile}</View>
              </View>
          }
        </View> :

        <View onClick={() => {
          if (user.userInfo.accessId) {
            Taro.navigateTo({
              url: '/pages/car/add/index'
            })
          } else {
            goToLogin()
          }
        }} className={classnames('carinfo-nohavecar-2', {
          'hide': carInfo
        })}
        >
          <View className='carinfo-icon'><Iconfont size='88' color='#999' name='icon-tianjiacheliang_huabanfuben' /></View>
          <View className='carinfo-context'>请先设置默认车辆信息</View>
          <View className='carinfo-addbtn'>去添加</View>
        </View>
    )
  }

  render() {
    const { loaded } = this.state
    return <View className='box'>{this.carStyleView()}</View>
  }
}
